<template>
    <div>
        <div class="banner" @click="handleGallaryShow">
            <img class="banner-img"
                src="http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg"
                alt="#">
            <div class="banner-info">
                <div class="banner-title">
                    大连圣亚海洋世界(AAAA景区)
                </div>
                <div class="banner-number">
                    <div>
                        <span class="iconfont iconsousuo search_icon"></span>
                        39
                    </div>
                </div>
            </div>
        </div>
        <CommonFade>
            <ComonGallary v-if="gallaryShow" @close="closeGallary"></ComonGallary>
        </CommonFade>
    </div>
</template>
  
<script>
import ComonGallary from '../common/ComonGallary.vue';
import CommonFade from '../common/CommonFade.vue';
export default {
    name: "DetailBanner",
    components: { ComonGallary, CommonFade },
    data(){
        return{
            gallaryShow:false,
        }
    },
    methods:{
        handleGallaryShow(){
            this.gallaryShow = true;
        },closeGallary(){
            this.gallaryShow = false;
        }
    }
}
</script>
  
<style scoped>
.banner {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 55%;
}

.banner-img {
    width: 100%;
}

.banner-info {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.banner-title,
.banner-number {
    color: #ffffff;
    font-size: 17px;
    line-height: 30px;
}

.banner-title {
    padding: 0 .2rem .2rem .3rem;
}

.banner-number {
    background-color: rgba(51, 51, 51, .7);
    width: 70px;
    text-align: center;
    height: 30px;
    overflow: hidden;
    margin-left: 40px;

    border-radius: 20px;
}
</style>